<template>
  <div class="permission-container">
    <div class="app-container">
      <!-- 表格 -->
      <el-card>
        <div style="text-align: right; margin-bottom: 20px">
          <el-button type="primary" size="small" @click="hAdd(1, 0)"
            >添加权限</el-button
          >
        </div>
        <el-table border :data="List" row-key="id">
          <el-table-column label="名称" prop="name" />
          <el-table-column label="标识" prop="code" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button
                v-if="row.type === 1"
                type="text"
                @click="hAdd(2, row.id)"
                >添加</el-button
              >
              <el-button type="text" @click="hEdit(row.id)">编辑</el-button>
              <el-button type="text" @click="delClick(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 弹框 -->
      <el-dialog
        :visible.sync="showDialog"
        :title="isEdit ? '编辑权限' : '新增权限'"
        @close="hclose"
      >
        <!-- 表单内容 -->
        <el-form
          label-width="100px"
          :model="formData"
          :rules="rules"
          ref="refForm"
        >
          <el-form-item label="权限名称" prop="name">
            <el-input v-model="formData.name" />
          </el-form-item>
          <el-form-item label="权限标识" prop="code">
            <el-input v-model="formData.code" />
          </el-form-item>
          <el-form-item label="权限描述" prop="description">
            <el-input v-model="formData.description" />
          </el-form-item>
          <el-form-item label="权限启用">
            <el-switch
              v-model="formData.enVisible"
              active-text="启用"
              active-value="1"
              inactive-text="不启用"
              inactive-value="0"
            />
          </el-form-item>
        </el-form>

        <template #footer>
          <div style="text-align: right">
            <el-button @click="showDialog = false">取消</el-button>
            <el-button type="primary" @click="submit">确定</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getPermissionList,
  addPermission,
  delPermission,
  getPermissionDetail,
  updatePermission,
} from "@/api/permissions";
import { tranListToTreeData } from "@/utils/index";
export default {
  data() {
    const valiCodePass = (rule, value, callback) => {
      //添加时的效验，code不能重复
      let existCodeList = this.formData;

      existCodeList.map((item) => {
        item.code;
      });
    };
    return {
      isEdit: false,
      showDialog: false,
      List: [], //保存所有权限
      formData: {
        name: "", // 名称
        code: "", // 权限标识
        description: "", // 描述
        enVisible: "0", // 开启
        pid: "", // 添加到哪个节点下
        type: "", // 类型
      },
      rules: {
        name: [
          { required: true, message: "权限名称不能为空", trigger: "blur" },
        ],
        code: [
          { required: true, message: "权限标识不能为空", trigger: "blur" },
          { validator: valiCodePass, trigger: "blur" },
        ],
        description: [
          { required: true, message: "权限描述不能为空", trigger: "blur" },
        ],
      },
      originList: [], // 在做校验时需要用到的数据
    };
  },
  created() {
    this.setPermissionList();
  },
  methods: {
    //弹框发生变化时触发
    hclose() {
      //重置表单
      this.formData = {
        name: "", // 名称
        code: "", // 权限标识
        description: "", // 描述
        enVisible: "0", // 开启
        pid: "", // 添加到哪个节点下
        type: "", // 类型
      };
      this.$refs.refForm.resetFields();
    },
    //获取权限列表
    async setPermissionList() {
      try {
        const res = await getPermissionList({ page: 1, size: 100 });
        this.originList = res.data.map(({ name, id, pid, code }) => {
          return { name, id, pid, code };
        });

        console.log(this.originList, "11111");
        //把平铺的数据转换成树形结构
        this.List = tranListToTreeData(res.data);
      } catch (error) {}
    },
    //添加权限
    async upDatePermission() {
      try {
        await addPermission(this.formData);
        this.showDialog = false;
        this.setPermissionList();
      } catch (error) {}
    },
    async doClick(id) {
      try {
        await delPermission(id);
        this.$message.success("删除成功");
        this.setPermissionList();
      } catch (error) {}
    },
    //删除权限
    delClick(id) {
      this.$confirm("确定要删除此权限吗？, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.doClick(id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //获取权限详情
    async hEdit(id) {
      this.isEdit = true;
      this.showDialog = true;
      try {
        const res = await getPermissionDetail(id);
        this.formData = res.data;
      } catch (error) {}
    },
    //更改权限
    async doisEdit() {
      try {
        await updatePermission(this.formData);
        this.showDialog = false;
        this.$message.success("更改成功");
        this.setPermissionList();
      } catch (error) {}
    },
    //添加按钮
    hAdd(type, id) {
      this.isEdit = false;
      this.showDialog = true;
      this.formData.type = type;
      this.formData.pid = id;
    },
    // 确定
    submit() {
      this.$refs.refForm.validate((valid) => {
        if (!valid) return; //效验不通过’
        this.isEdit ? this.doisEdit() : this.upDatePermission();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>